<template>
	<view>
		<view class="head">
			<view>
				<text>水表号</text>
				<view >{{show.id}}</view>
			</view>
			<view>
				<text>抄表顺序</text>
				<view>01</view>
			</view>
		</view>
		<view class="same time">
			<text>抄表时间</text>
			<view>{{cbData.cb_time}}</view>
		</view>
		<view class="til">
			<text>备注</text>
		</view>
		<view class="content">
			{{cbData.cb_beizhu}}
		</view>
		<view class="til">
			<text>定位</text>
		</view>
		<view class="content">
			{{cbData.cb_dingwei}}
		</view>
		<view class="content">
			<view class="same inp">
				<text>地址</text>
				<view>{{show.qy_dazhi}}</view>
			</view>
			<view class="same">
				<text>表况</text>
				<view>正常</view>
			</view>
			<view class="same">
				<text>上次抄表日期</text>
				<view>{{cbData.cb_shangcitime}}</view>
			</view>
			<view class="same">
				<text>上次抄表水量</text>
				<view>15m³</view>
			</view>
			<view class="same">
				<text>正常用水范围</text>
				<view>20m³——30m³</view>
			</view>

			<view class="same">
				<text>上次抄表数</text>
				<view>{{cbData.sc_dushu}}</view>
			</view>
			<view class="same">
				<text>本次抄表数</text>
				<input type="text" :value="cbData.cb_dushu" placeholder="请输入" />
			</view>
			<view class="same bot">
				<text>水量</text>
				<input type="text" :value="cbData.cb_yongshui" placeholder="根据起止数自动计算" />
			</view>
		</view>
		<button id="confir" >确定</button>
	</view>
</template>

<script>
	import {ref,computed,reactive,toRefs,onMounted,getCurrentInstance} from 'vue'
	import {mapState,useStore} from 'vuex'
	export default {
		setup(){
			const {state,getters,commit,dispatch}=useStore();
			const {proxy}=getCurrentInstance();
			let data=reactive({
				a:1,
				b:2,
				title:'hello',
				cbData:{},
				time:computed(()=>state.chaobiao.time),
				show:computed(()=>state.chaobiao.info),
			});
			onMounted(()=>{
				proxy.$http({
					url:'/miniwatermeter/getlast',
						method:'get',
						data:{
							id:data.show.sb_num,
							time:data.time+'%'
						}
				}).then((res)=>{
					if(!res.data.data){  //如果为空，则返回
						return
					}
					data.cbData=res.data.data[0];
					if(!data.cbData.cb_time){
						data.cbData.cb_time=data.cbData.cb_time.substring(0,10);
					}
					if(!data.cbData.cb_shangcitime){
						data.cbData.cb_shangcitime=data.cbData.cb_shangcitime.substring(0,10);
					}
					
				})

			})
	     return  {...toRefs(data)  };	
		},
		onLoad() {
			console.log(mapState)
		},
		methods: {
			changeMeter(){}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 0 25rpx;
		box-sizing: border-box;
		color: #666666;
	}
	.head{
		display: flex;
		border: 1px solid #E4E4E4;
	}
	.head>view{
		width: 350rpx;
		padding: 20rpx;
		box-sizing:border-box;
		display: flex;
		
		text{
			margin-right: 20rpx;
		}
	}
	.head>view:first-child{
		border-right: 1px solid #E4E4E4;
	}
	
	.til{
		padding: 10rpx 45rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		view{
			color: #0079FE;
		}
	}
	.content{
		padding: 20rpx;
		box-sizing: border-box;
		border: 1px solid #E4E4E4;
	}

	.content>input{
		padding:0 20rpx;
		box-sizing: border-box;
	}
	.same{
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #E4E4E4;
		display: flex;
		text{
			width: 230rpx;
		}
		view{
			flex: 1;
		}
	}
	.same>picker,.same>input{
		flex: 1;
	}
	.inp{
		padding-top: 0;
	}
	.bot{
		padding-bottom: 0;
		border: none;
	}
	#confir{
		width: 200rpx;
		margin: 20rpx auto;
		color: #fff;
		background-color: #7F7F7F;
	}
	
	.time{
		border: 1px solid #E4E4E4;
	}
	
</style>
